
<template>
    <div>
        <van-tabbar v-model="active" active-color="#02ccbd" inactive-color="#999" @change="changeTabbar">
            <van-tabbar-item to="/deskTop">
                <span>工作台</span>
                <img slot="icon" slot-scope="props" :src="props.active ? dashBoard.active : dashBoard.normal" />
            </van-tabbar-item>
            <van-tabbar-item to="/mine">
                <span>我的</span>
                <img slot="icon" slot-scope="props" :src="props.active ? mine.active : mine.normal" />
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
export default {
    name:"Tabbars",
    data(){
        return {
            active:0,
            dashBoard:{
                active:require('@/assets/images/dashBoard2.png'),
                normal:require('@/assets/images/dashBoard1.png')
            },
            mine:{
                active:require('@/assets/images/mine2.png'),
                normal:require('@/assets/images/mine1.png')
            }
        }
    },
    created(){
        this.active = this.$store.state.tabbarActive;
    },
    methods:{
        changeTabbar(index){
            // console.log(index);
            this.$store.commit('setTabbarActive',index);
        }
    }
}
</script>
<style lang="less" scoped>
.van-tabbar-item{font-size: 12px !important;}
    // /deep/ .van-tabbar-item{font-size: 24px;}
</style>